<template>
  <div class="topbar">
    <div class="topbar-in w">
      <div class="top-l">欢迎来到叩丁狼积分商城</div>
      <ul class="top-r">
        <li class="user">
          <img :src="userInfo.headImg" width="23px" alt="" />
          用户名：<a href="javaScript">{{userInfo.nickName}}</a></li>
        <li>我的积分：<a href="javaScript">{{userInfo.coin}}</a></li>
        <li><a href="javaScript">获取积分</a></li>
        <li><a href="javaScript">叩丁狼官网</a></li>
        <li class="cart-btn" v-if="isLogined">
          <img src="../assets/img/cart.png" alt="" />
          <a href="javaScript" v-if="isLogined">购物车</a>
          <strong>{{cartTotal}}</strong>
        </li>
        <li class="active" @click="changeIsShowModal(true)" v-else>
          <a href="javaScript">登录</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState,mapActions} from "vuex";
import {WxLoginAPI} from '@/request/api.js'
export default {
  // watch:{
  //   "$route.path":{
  //     handler(newValue,oldValue){
  //       console.log(newValue,oldValue);
  //       let mytoken = localStorage.getItem('x-auth-token')
  //       // if(mytoken){
  //       //   this.changeIsLogined(true)
  //       // }else{
  //       //   this.changeIsLogined(false)
  //       // }
  //       this.changeIsLogined(Boolean(mytoken))
  //     }
  //   }
  // },
 async created(){
    let mycode = this.$route.query.code
    if(mycode){
      let res = await WxLoginAPI({
        code:mycode
      })
      if(res.code == 0){
        //登录成功 提示
        this.asyncIsShowToast({
          show:true,
          msg:"登陆成功",
          type:"success"
        })
        //保存token
        localStorage.setItem("x-auth-token",res['x-auth-token'])
        // 清除uuid
        this.$router.push(this.$route.path)
        //切换登录状态
        this.changeIsLogined(true)
        this.asyncUserInfo()
      }else if(res.code==400){
        //提示用户重新扫码登录
        this.asyncIsShowToast({
          show:true,
          msg:"请重新扫码登录",
          type:"warning"
        })
        this.changeIsShowModal(true)
        //为用户弹出登录框
      }else if(res.code ==407){
        //提示用户绑定手机号
         this.asyncIsShowToast({
          show:true,
          msg:"请绑定手机号",
          type:"warning"
        })
        //打开登录框
        this.changeIsShowModal(true)
        //保存uuid
        localStorage.setItem("uuid",res.uuid)
      }
    }else{
      let mytoken = localStorage.getItem('x-auth-token')
      this.changeIsLogined(Boolean(mytoken))
      if(mytoken){
        this.asyncUserInfo()
      }else{
        this.inituserInfo()
      }
    }
  },
  computed: {
    ...mapState({
      isLogined: (state) => state.loginStatus.isLogined,
      userInfo:state => state.userInfo.userInfo,
      cartTotal:state => state.userInfo.cartTotal
    }),
  },
  methods: {
    ...mapMutations({
      changeIsShowModal: "showModal/changeIsShowModal",
      changeIsLogined:'loginStatus/changeIsLogined',
      inituserInfo:"userInfo/inituserInfo"
    }),
    ...mapActions({
      asyncIsShowToast:"showToast/asyncIsShowToast",
      asyncUserInfo:"userInfo/asyncUserInfo"
    })
  },
};
</script>

<style lang="less">
.topbar {
  height: 40px;
  background-color: #242b39;
  .topbar-in {
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    display: flex;
    justify-content: space-between;
    .top-l {
      width: 155px;
      height: 15px;
      line-height: 40px;
      color: #fff;
    }
    .top-r {
      width: 528px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      line-height: 40px;
      .active {
        background-color: #0a328e;
        height: 40px;
      }
      li {
        &:last-child {
          width: 124px;
          text-align: center;
        }
        &.cart-btn {
        width: 124px;
        height: 40px;
        background: #0a328e;
        text-align: center; 
        img{
          width: 20px;
          height: 19px;
          vertical-align: middle;
        }
        span{
          margin: 0 8px;
        }
        strong{
          width: 22px;
          height: 22px;
          line-height: 22px;
          display: inline-block;
          border-radius: 50%;
          background-color: #fd604d;
        }
      }
      }
      // .user::before {
      //   content: "";
      //   width: 23px;
      //   height: 20px;
      //   background: url(../assets/img/1.png) no-repeat left center;
      //   background-size: 20px;
      //   display: inline-block;
      //   vertical-align: middle;
      //   margin-bottom: 5px;
      // }
      .user{
        img{
          vertical-align: middle;
        }
      }
      span {
        display: inline-block;
        width: 22px;
        height: 22px;
        line-height: 22px;
        background-color: red;
        margin-left: 5px;
        border-radius: 50%;
      }
    }
  }
}
</style>